<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/comm/mytags.jsp" %>
<!DOCTYPE>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <script type="text/javascript" src="${ctx}/static/js/jquery-1.8.3.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta name="MobileOptimized" content="320"/>
    <title>活动开始了</title>
    <link href="${ctx}/static/wxcss/bplayer.css" rel="stylesheet" type="text/css" />
    <script>
        $(function(){
            $('#share').click(function(){
                $("#share").hide();
            });

            $('.login-share').click(function(){
                //$("#share").show();
            });

        });
    </script>

    <input id="wx-share-title" type="hidden" value="活动开始了" />
    <input id="wx-share-desc" type="hidden" value="我在参与活动开始了！获得36积分你能超过" />
    <input id="sharelocationurl" type="hidden" value="" />


    <script src="${ctx}/static/js/jweixin-1.0.0.js" type="text/javascript"></script>
    <script src="${ctx}/static/js/newfxjs.js" type="text/javascript"></script>
    <style>

        .bowl-logo {
            left: 33%;
            position: absolute;
            top: 13%;
            width: 30%;
            z-index: 1;
        }

        .login-share-ex i.icon {
            background: url("${ctx}/static/wximg/zhuo-icon-3.png") no-repeat scroll center center / 100% auto rgba(0, 0, 0, 0);
            display: inline-block;
            height: 26px;
            margin: 0 5px;
            vertical-align: -8px;
            width: 32px;
        }

        .bobing-num.ulib-r30.login-share.login-share-ex > span {

        }
        .bobing-num {
            background-color: #fff;
            border: 1px dashed #fdb08e;
            font-size: 1.4rem;
            margin: 1% 8% 0;
            padding: 4% 0;
            text-align: center;
        }
        dl.wap-list-1 dd li h3 span {
            width: 55%;
        }
        dl.wap-list-1 dd li h3 em {
            width: 40%;
        }
    </style>
</head>
<body class="yahei">

<script>
    var win_w;
    if (window.innerWidth){
        win_w = window.innerWidth;
    }
    else if ((document.body) && (document.body.clientWidth)){
        win_w = document.body.clientWidth;
    }
    // 通过深入 Document 内部对 body 进行检测，获取窗口大小
    if (document.documentElement && document.documentElement.clientWidth  && document.documentElement.clientHeight){
        win_w = document.documentElement.clientWidth;
    }
    if (win_w>640){
        win_w = 640;
    }
</script>
<section style="">
    <div id="p1" class="w-wrap" style="display:none;">
        <div class="show-bg"></div>
        <div class="prize">
            <div class="hd">
                <p>恭喜你博到：<em id="p1name"></em><br>请再接再厉！分 享之后中奖概率更高哦！</p>
            </div>
            <div class="bd">
                <a class="login-go btn-shadow" href="javascript:void(0)">继续博饼</a>
                <a class="login-share btn-shadow" href="javascript:void(0)">我要分 享</a>
            </div>
        </div>
    </div>

    <div id="p2" class="w-wrap" style="display:none;">
        <div class="show-bg"></div>
        <div class="prize">
            <div class="hd">
                <img id="p2img" src="">
                <p>恭喜你博到奖品：<em id="p2name"></em><br>还有更多奖品等你来博，请再接再厉！</p>
                <span id="p2tip"></span>
            </div>
            <div class="bd">
                <a class="nologin-go btn-shadow" href="javascript:void(0)">继续博饼</a>
                <a class="btn-shadow" href="">立即登录</a>
            </div>
        </div>
    </div>

    <div id="share" class="w-wrap" style="display:none;">
        <div class="show-bg" style="z-index: 1001;"></div>
        <div class="show-img"><img src="${ctx}/static/picture/wap-weixin.png"></div></div>
    </div>

    <div class="bobing-panel">
        <div class="bowl-wrap">
            <div class="w-wrap">
                <div class="result ulib-r30 clear">
                    <div class="icon"><img width="100%" alt="" /></div>
                    <div class="result-tx"></div>
                </div>
            </div>
            <audio id="yao" src="${ctx}/static/wxaudio/yao.mp3"></audio>
            <div class="bowl" id="yao_saizi">
                <img src="${ctx}/static/picture/bowl.png" alt="" />
                <em class="dice dice1"><img src="${ctx}/static/picture/dice1.png" alt="" /></em>
                <em class="dice dice2" style="top:45%;left:55%;"><img src="${ctx}/static/picture/dice2.png" alt="" /></em>
                <em class="dice dice3" style="top:54%;left:45%;"><img src="${ctx}/static/picture/dice3.png" alt="" /></em>
                <em class="dice dice4" style="top:41%;left:40%;"><img src="${ctx}/static/picture/dice1.png" alt="" /></em>
                <em class="dice dice5" style="top:58%;left:60%;"><img src="${ctx}/static/picture/dice5.png" alt="" /></em>
                <em class="dice dice6" style="top:62%;left:35%;"><img src="${ctx}/static/picture/dice6.png" alt="" /></em>
            </div>

            <div class="bobing-num ulib-r30"><i class="icon"></i>【今天还剩<b id="count">
                <c:if test="${user.dayJoinCount!=null}">
                    ${user.dayJoinCount}
                </c:if>
                <c:if test="${user.dayJoinCount == null}">
                    0
                </c:if>
            </b>次博饼机会】</div>


            <div style="display:none;" class="bobing-num ulib-r30 login-share login-share-ex"><i class="icon"></i><span>【点我】可以分 享给</span></div>

        </div>

        <div class="cover">
            <div class="w-wrap">
                <a class="closex ulib-r5" href="javascript:"></a>
                <div class="pop">
                    <img src="${ctx}/static/picture/yao.png" width="100%" alt="" />
                    <a href="javascript:" class="btn btn-shadow" id="pop_close">开始博饼</a>
                </div>
            </div>
        </div>
    </div>

    <style>
        .zhuo-winning {
            background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
            margin: 0;
        }
    </style>
    <div class="w-wrap">
        <div class="zhuo-winning">
            <dl>
                <dt>
                    每天可以博饼次数：
                    <em>
                        <c:if test="${dayJoinCount==null}">
                           10
                        </c:if>
                        <c:if test="${dayJoinCount != null}">
                            ${dayJoinCount}
                        </c:if>
                    </em>次</dt>
                <dd class="clear">
                </dd>
            </dl>
        </div>
    </div>
    <div class="w-wrap">
        <div class="zhuo-winning">
            <dl>
                <dt>已博<em id="times">
                    <c:if test="${user.totalJoinCount!=null}">
                        ${user.totalJoinCount}
                    </c:if>
                    <c:if test="${user.totalJoinCount == null}">
                        0
                    </c:if>

                </em>次，当前总积分：
                    <em id="credits">
                        <c:if test="${user.credits!=null}">
                            ${user.credits}
                        </c:if>
                        <c:if test="${user.credits == null}">
                            0
                        </c:if>
                        分
                    </em>;</dt>
                <dd class="clear">
                </dd>
            </dl>
        </div>
    </div>

    <div style="color:#fff;">
            <span style="font-size: 2rem;">活动须知</span>
            <div style="margin-left:2rem;margin-bottom: 5px;">1.为答谢广大用户，特推出博饼赢积分换好礼活动，礼品数量有限，先到先得！</div>
            <div style="margin-left:2rem;margin-bottom: 5px;">2.本活动才去积分制度：一秀1积分；二举2积分；
                四进3积分；三红4积分；对堂5积分；状元6积分；
                五子登科7积分；五王8积分；状元插金花9积分；
                六杯红/六杯黑10积分。
            </div>
            <div style="margin-left:2rem;margin-bottom: 5px;">
                3.本次活动最终解释权归活动方所有。
            </div>
    </div>
</section>
<style>
    dl.wap-list-1 dd li:first-child {
        margin-right: 0;
        width: 20%;
    }

    dl.wap-list-1 dd li:last-child {
        width: 80%;
    }

    dl.wap-list-1 dd li:first-child {
        margin-right: 0;
        width: 10%;
    }

    dl.wap-list-1 dd li {
        float: left;
        width: 20%;
    }

    dl.wap-list-1 dd li:last-child {
        width: 70%;
    }
    dl.wap-list-1 dd li img {
        /*width: 144px;*/
    }
</style>

<script>
    $(document).ready(function()
    {

        var flag=0;//标志位

        $('.login-go').click(function(){
            $('#p1').hide();
            flag = 1;
        });

        $('.nologin-go').click(function(){
            $('#p2').hide();
            flag = 1;
        });


        //关闭弹出窗加载音频

        $('#pop_close,.closex').click(function() {
            document.getElementById('yao').play();
            document.getElementById('yao').pause();
            $(this).parents('.cover').css('display', 'none');
            flag=1;
        });

        var SHAKE_THRESHOLD = 1000;
        var last_update = 0;
        var x = y = z = last_x = last_y = last_z = 0;
        if(window.DeviceMotionEvent) {
            window.addEventListener('devicemotion', deviceMotionHandler, false);
        } else {
            $('#yao_saizi').click(function(){
                yaoshaizi();
            });
        }
        function deviceMotionHandler(eventData) {
            var acceleration = eventData.accelerationIncludingGravity;
            var curTime = new Date().getTime();
            if((curTime - last_update) > 100) {
                var diffTime = curTime - last_update;
                last_update = curTime;
                x = acceleration.x;
                y = acceleration.y;
                z = acceleration.z;
                var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
                if(speed > SHAKE_THRESHOLD) {
                    var order = $("#log tr").length + 1;
                    yaoshaizi();
                };
                last_x = x;
                last_y = y;
                last_z = z;
            };
        };//摇一摇触发
        function yaoshaizi(){
            $.ajax({
                url:"${ctx}/canBobing",
                type:"post",
                dataType:"json",
                success:function(res){
                    if(res.code===0){
                        if (flag)
                        {
                            flag = 0;
                            $.ajax({
                                url:"${ctx}/bobing",
                                type:"post",
                                dataType:"json",
                                data:{
                                    'wid':'18',
                                    'tid':'50436',
                                    'token':'o7VbEjuRhV1vT-N2LoSZfktAK2nM'
                                },
                                beforeSend:function(){
                                    $('#bobing').hide();
                                    $('.result').hide();
                                    $('.dice').addClass('active');
                                    document.getElementById('yao').play();
                                },
                                success:function(data){
                                    if(data.code === 0)
                                    {
                                        for (var i=0; i < 6; i++){
                                            $('.dice'+[i+1]).children('img').attr('src', '${ctx}/static/picture/dice'+data.resultarr[i]+'.png');
                                        }
                                        setTimeout(function(){
                                            $('.result').show();
                                            $('.result').find('.icon').children('img').attr('src', "${ctx}/static/picture/bobing.png");
                                            $('.result-tx').html(data.resultname+"    （"+data.credits+" 分）");
                                            $('#count').html(data.count);
                                            $('#times').html(data.u_count);
                                            $('#credits').html(data.u_credits);
                                        },1000);
                                    }
                                    else if(data.code === 500)
                                    {
                                        alert(data.msg);
                                        location.href="${ctx}/wxLogin";
                                        //window.location.reload(true);
                                        return false;
                                    }
                                    else if(data.code === 100){
                                        alert(data.msg);
                                        return false;
                                    }
                                },
                                complete :function()
                                {
                                    setTimeout(function(){
                                        $('#bobing').show();
                                        $('.dice').removeClass('active');
                                        flag=1;
                                    },1200);
                                }
                            });
                        }
                    }
                    else if(res.code === 500)
                    {
                        alert(res.msg);
                        location.href="${ctx}/wxLogin";
                        //window.location.reload(true);
                        return false;
                    }
                    else if(res.code === 100){
                        alert(res.msg);
                        return false;
                    }
                }
            });
        }

        $('#yao_saizi').click(function(){
            yaoshaizi();
        });
    });

</script>
<section style="padding-bottom:30px;"></section>

<script language="javascript" src="${ctx}/static/js/jquery.lazyload.js"></script>
<script language="javascript">
//    jQuery(function() {
//        jQuery("img").lazyload({
//            event : "scroll",
//            effect : "fadeIn",
//            threshold : 300,
//            placeholder : "http://cdntest.weixiaoxin.com/Public/bobing/load.gif"
//        });
//    });
</script>


<footer><p></p>
    <div class="footer-nav">
        <a class="footer-nav-plus on" href="javascript:void(0)"></a>
        <dl class="hide" style="display:none;">
            <dd><a href="${ctx}/wxIndex">返回首页</a></dd>
            <dd><a href="${ctx}/wxPrizeList">积分兑换</a></dd>
            <dd><a href="${ctx}/wxUserPrize">兑换记录</a></dd>
        </dl>
    </div>
</footer>




<script language="javascript">
    jQuery(function(){
        jQuery('.footer-bg').click(function(){
            if(jQuery('.footer-nav .off').length){
                jQuery('.footer-nav .footer-nav-plus').removeClass('off');
                jQuery('.footer-bg').hide();
                jQuery('.footer-nav dl').animate({opacity: "0"}, 100, "linear");
                jQuery('.footer-nav dl').hide();
            }
        });
        jQuery('.footer-nav .footer-nav-plus').click(function(){
            if(jQuery('.footer-nav .off').length==0){
                jQuery('.footer-nav .footer-nav-plus').addClass('off');
                jQuery('.footer-bg').show();
                jQuery('.footer-nav dl').show().animate({opacity: "1"}, 100, "linear");
            }else{
                jQuery('.footer-nav .footer-nav-plus').removeClass('off');
                jQuery('.footer-bg').hide();
                jQuery('.footer-nav dl').animate({opacity: "0"}, 100, "linear").hide();
            }
        });
        jQuery('.footer-ad-close').click(function(){
            jQuery(this).parent('.footer-ad').hide();
        });
        //默认展开
        /*
         jQuery('.footer-nav .footer-nav-plus').addClass('off');
         jQuery('.footer-bg').show();
         jQuery('.footer-nav dl').show().animate({opacity: "1"}, 100, "linear");
         */
    });
</script>

<div style="display:none">
    <img src="${ctx}/static/picture/hm.gif" width="0" height="0" />
</div>
<p class="footerwebmzsm"></p>

</body>
</html>
